<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <script>
    function delay(s) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(`延迟了${s}秒`)
        })
      })
    }
    async function fun1() {
      const res1 = await delay(1)
      console.log('res1', res1)
      const res2 = await delay(3)
      console.log('res2', res2)
    }
    async function fun2() {
      const res3 = await delay(2)
      console.log('res3', res3)
      const res4 = await delay(4)
      console.log('res4', res4)
    }
    //   fun1()
    //   fun2()
    // res1 res3 res2 res4
    // await函数只能影响async函数内部的执行顺序，并不能影响外部函数的执行顺序
    //   验证async函数的返回值是什么:promise
    //   let p = fun1()
    //   console.log('p', p) // promise

    // 想要先执行完fun1里面的所有代码，再去执行func2里面的代码，又该怎么做？
    async function yyy() {
      await fun1()
      await fun2()
    }
    yyy() // res1 res2 res3 res4

    // 以上代码等价于：
    fun1().then((res) => {
      fun2()
    })

    // 再次证明：
    //await函数只能影响async函数内部的执行顺序，并不能影响外部函数的执行顺序
    console.log('top111')
    yyy()
    console.log('bottom111')
  // top111 bottom111 res1 res2 res3 res4
  </script>
</body>

</html>